<template>
  <view class="container">
    <view class="container__header">
      <!--   搜索框   -->
      <hxk-search v-model="queryParams.keyword" :isMultiple="isMultiple" :placeholder="placeholder"
                  :currentSearchType.sync="searchType" :searchTypeList="searchTypeList" @search="handleSearch"/>
    </view>
    <view class="container__body">
      <!--   列表   -->
      <view class="container__body__list">
        <view class="container__body__list__item" v-for="(item, index) in list" :key="index">
          <view class="container__body__list__item-content">
            <view class="container__body__list__item-content-left">
              <view class="container__body__list__item-content-left--item">
                <text>{{ item.premisesAddress }}</text>
              </view>
              <view class="container__body__list__item-content-left--item" v-if="item.proprietorName">
                <view class="container__body__list__item-content-left--item-label">
                  <text>业主：</text>
                </view>
                <view class="container__body__list__item-content-left--item-value">
                  <text>{{ item.proprietorName }}</text>
                </view>
              </view>
              <view class="container__body__list__item-content-left--item" v-if="item.reserveUser">
                <view class="container__body__list__item-content-left--item-label">
                  <text>承租人：</text>
                </view>
                <view class="container__body__list__item-content-left--item-value">
                  <text>{{ item.reserveUser }}</text>
                </view>
              </view>
              <view class="container__body__list__item-content-left--item" v-if="item.checkInTime&&item.checkOutTime">
                <view class="container__body__list__item-content-left--item-label">
                  <text>租住周期：</text>
                </view>
                <view class="container__body__list__item-content-left--item-value">
                  <text>{{ item.checkInTime }}-{{
                      item.checkOutTime
                    }}
                  </text>
                </view>
              </view>
            </view>
            <view class="container__body__list__item-content-right">
              <view class="container__body__list__item-content-right-btn">
                <button v-if="item.noVacancy&&item.noVacancy==='1'" size="mini"
                        class="container__body__list__item-content-right-btn-disabled">满房
                </button>
                <button v-else-if="item.cleaningProcessState&&item.cleaningProcessState==='1'" size="mini"
                        class="container__body__list__item-content-right-btn-disabled">未配置
                </button>
                <button v-else size="mini" @click="handleSelect(item)">选择</button>
              </view>
            </view>
          </view>
        </view>
        <uni-load-more :status="loadStatus" :contentText="contentText" @clickLoadMore="loadMore"></uni-load-more>
      </view>
    </view>
  </view>
</template>
<script>

import {userHouseList} from "@/api/manager/order";


export default {
  name: "index",
  data() {
    return {
      // 是否多选
      isMultiple: false,
      //搜索类型
      searchType: 'premisesAddress',
      // 搜索类型列表
      searchTypeList: [],
      placeholder: '搜索楼盘、房间',
      // 接口链接
      apiUrl: '',
      // 列表数据
      list: [],
      // 总数
      total: 0,
      // 分页参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: null//搜索关键字
      },
      // 加载状态
      loadStatus: 'more',//more:加载更多,noMore:没有更多数据,loading:加载中
      // 加载提示语
      contentText: {contentdown: '下拉加载更多', contentrefresh: "加载中...", contentnomore: "没有更多数据了"},
      // 其他参数
      otherParams: {}
    }
  },
  onLoad(options) {
    if (options.type) {
      let type = options.type;
      console.log('类型', type)
      switch (type) {
        case 'userHouseList':
          this.apiUrl = userHouseList;
          break;
        default:
          this.apiUrl = userHouseList;
          break;
      }
    } else {
      this.apiUrl = userHouseList
    }
    this.initData();

  },
  onShow() {
  },
  onReachBottom() {
    // 触底,加载更多
    this.loadMore();

  },
  methods: {
    //初始化数据
    initData() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        keyword: ''//搜索关键字
      }
      this.list = [];
      this.total = 0;
      this.getList();
    },
    //加载更多
    loadMore() {
      // 加载更多,如果总数大于当前页数*pageSize,则加载更多
      if (this.total > this.queryParams.pageNum * this.queryParams.pageSize) {
        this.loadStatus = 'loading';
        this.queryParams.pageNum++;
        this.getList();

      } else if (this.total <= this.queryParams.pageNum * this.queryParams.pageSize) {
        // 已经加载完毕
        console.log("已经加载完毕")
        this.loadStatus = 'noMore';
      }
    },
    // 搜索
    handleSearch() {
      this.queryParams.pageNum = 1;
      this.queryParams.keyword = this.queryParams.keyword.trim();
      this.list = [];
      this.getList();
    },
    // 获取列表数据
    getList() {
      this.loadStatus = 'loading';
      setTimeout(() => {
        let params = Object.assign({}, this.queryParams, this.otherParams);
        params[this.searchType] = this.queryParams.keyword;
        console.log('请求参数', params)
        this.apiUrl(params).then(res => {
          //当前为第一页
          if (this.queryParams.pageNum === 1) {
            this.list = res.rows;
          } else {
            // 不是第一页,则追加数据
            this.list = this.list.concat(res.rows);
          }
          this.total = res.total;
          this.loadStatus = this.total <= this.queryParams.pageNum * this.queryParams.pageSize ? 'noMore' : 'more';
          // 如果没有数据
          if (this.total === 0) {
            this.loadStatus = 'noMore';
            this.contentText.contentnomore = "暂无数据";
          }
        })

      }, 500);

      // 模拟数据结束


    },
    // 选择房间
    handleSelect(item) {
      console.log('选择房间', item)
      const eventChannel = this.getOpenerEventChannel();
      //向上抛出事件,通知父页面
      if (eventChannel && eventChannel.emit) {
        eventChannel.emit('selectHouseCallback', item)
      }
      this.$tab.navigateBack();
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  background: #ffffff;

  .container__header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
    //height: 154rpx;
    display: flex;
    flex-direction: column;

    .container__header__search {

      .container__header__search-input {
        padding: 0 20rpx;

        button {
          background: $hxk-primary-color;
          color: #fff;
          padding: 0 10rpx;
        }
      }

      .container__header__search-tabs {
        ::v-deep .u-tabs__wrapper__nav__item__text {
          font-size: 28rpx !important;
        }

        ::v-deep .u-tabs__wrapper__nav__line {
          bottom: 18rpx !important;
          opacity: 0.6 !important;
        }
      }
    }


  }

  .container__body {
    background-color: #fff;
    padding: 20rpx;

    .container__body__list {
      margin-bottom: 150rpx;

      .container__body__list__item {
        background-color: #fff;
        border-radius: 10rpx;
        margin-bottom: 20rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .container__body__list__item-content {
          padding: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1rpx solid #D8D8D8;

          .container__body__list__item-content-left {
            .container__body__list__item-content-left-label {
              font-weight: 500;
              font-size: 28rpx;
            }

            .container__body__list__item-content-left--item {
              display: flex;
              align-items: center;
              margin-bottom: 10rpx;

              &:last-child {
                margin-bottom: 0;
              }
            }
          }

          .container__body__list__item-content-right {

            .container__body__list__item-content-right-btn {
              width: 131rpx;
              height: 56rpx;

              button {
                width: 100%;
                height: 100%;
                background: $hxk-primary-color-light;
                color: $hxk-primary-color;
                border-radius: 28rpx;
                padding: 0 10rpx;

                &.container__body__list__item-content-right-btn-disabled {
                  color: #ffffff;
                  background-color: #A8A8A8;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
